<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现增加删除功能</title>
		<style type="text/css">
			#nav,#tab{
				border: 0.125rem #000000 solid;
				width: 400px;
				height: 400px;
				margin: 0 auto;
				text-align: center;
			}
			#btn{
				width: 100px;
				height: 50px;
				margin-top:150px;
			}
			#tab th{
				font-size: 16px;
				font-weight: 0.625rem;
				padding-left: 20px;
				background-color: #FFA500;
				border: 1px saddlebrown solid;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<h2>学生录入信息系统</h2>
			<label for="name">姓名：</label>
			<input type="text" name="" id="name" value="" />
			<br>
			<label for="age">年龄：</label>
			<input type="text" name="" id="age" value="" />
			<br>
			<label>性别：</label>
			<select name="" style="width: 150px;padding-right:70px;" id="sex">
				<option value="男" >男</option>
				<option value="女">女</option>
			</select>
			
			<br>
			<label for="phone">手机：</label>
			<input type="number" name="" id="phone" value="" />
			<br>
			<button type="button" id="btn">确认提交</button>
		</div>
		<div id="tab">
			<table  cellspacing="" cellpadding="">
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th style="width: 130px;">手机</th>
					<th>操作</th>
				</tr>
				<tbody id="tbd">
					<tr id="tr">
						<td></td>
					</tr>
				</tbody>
				<script type="text/javascript">
					var input = document.getElementsByTagName('input');
					var sex = document.getElementById('sex');
					var btn = document.getElementById('btn');
					var tbd = document.getElementById('tbd');
					let stus =[];
					btn.onclick = function(){
						let obj = {
							name:input[0].value,
							age:input[1].value,
							sex:sex.value,
							phone:input[2].value
						};
						stus.push(obj);
						let tr = '';
						for(var i = 0 ; i < stus.length;i++){
							tr += "<tr class='newTr'>"+
							"<td>"+stus[i].name+"</td>"+
							"<td>"+stus[i].age+"</td>"+
							"<td>"+stus[i].sex+"</td>"+
							"<td>"+stus[i].phone+"</td>"+
							"<td onclick=del("+i+")><button>删除</button></td>"+
							"</tr>"
						}
						tbd.innerHTML = tr ;
						
					}
					function del(index){
						stus.splice(index,1);//删除数组中数据
						//删除dom元素
						var tr = document.getElementsByClassName('newTr')[index];
						tbd.removeChild(tr);
						
					}
				</script>
			</table>
		</div>
		
	</body>
</html>
